<#include '../header.ftl'>
<#include 'header.ftl'>
<link href="/css/scrollBar.css" rel="stylesheet">
<script src="/js/text_overflow.js"></script>
<style>
    /*------公共样式开始------*/
    .fa-angle-right:focus {
        -ms-transform: rotate(45deg);
        /* IE 9 */
        -moz-transform: rotate(45deg);
        /* Firefox */
        -webkit-transform: rotate(45deg);
        /* Safari 和 Chrome */
        -o-transform: rotate(45deg);
        /* Opera */
        transform: rotate(45deg);
        -webkit-transition: -webkit-transform 0.2s ease-in;
        /* Safari 和 Chrome */
        -moz-transition: -moz-transform 0.2s ease-in;
        /* Firefox */
        -o-transition: -o-transform 0.2s ease-in;
        /* Opera */
        transition: transform 0.2s ease-in;
    }
    .layui-inline .layui-form-label {
        width: auto;
    }
    .img-box {
        position: relative;
        overflow: hidden;
    }
    .img-box:after {
        position:absolute;
        left: 0;
        top: 0;
        opacity: 0;
        width:100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        content: attr(data-text);
        color: #FFF;
        text-align: center;
        padding: 32% 0;
        border-radius: 100%;
        font-style: normal;
        pointer-events: none;
        transition: opacity 0.6s;
        -moz-transition:opacity 0.6s; /* Firefox 4 */
        -webkit-transition:opacity 0.6s; /* Safari and Chrome */
        -o-transition:opacity 0.6s; /* Opera */
    }
    .img-box:hover:after {
        opacity: 1;
    }
    .img-box-before:after {
        /*line-height: 39px;*/
        padding: 12% 0;
    }
    .layui-inline-block {
        display: inline-block !important;
    }
    .result_account {
        text-indent: 2em;
    }
    /*------公共样式结束------*/
    /*小屏幕设备*/
    @media (max-width: 767px) {
        /*------显示成果页面中部开始------*/
        /*------显示成果页面中部结束------*/
    }

    /*中大型屏幕设备*/
    @media (min-width: 768px) {
        /*------显示成果页面中部开始------*/
        /*------显示成果页面中部结束------*/
    }

</style>
<main style="min-height: ${maxHeight}px">
    <div style="max-width: ${maxWidth}px;margin: 0 auto">

        <#-- 中部展示形式选择栏开始 -->
        <div class="accordion" id="accordion">
            <div class="card-body">
                <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="customRadioInline1" name="customRadioInline1"
                           class="custom-control-input" checked>
                    <label class="custom-control-label" for="customRadioInline1">图文形式</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="customRadioInline2" name="customRadioInline1"
                           class="custom-control-input">
                    <label class="custom-control-label" for="customRadioInline2">仅文字</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="customRadioInline3" name="customRadioInline1"
                           class="custom-control-input">
                    <label class="custom-control-label" for="customRadioInline3">仅图片</label>
                </div>
            </div>
        </div>
        <#-- 中部展示形式选择栏结束 -->

        <#-- 中部条件查询栏开始 -->
        <div style="padding-top: 10px">
            <div class="layui-form" lay-filter="search_result_form">
                <div class="layui-form-item" style="margin-bottom: 0">
                    <div class="layui-inline">
                        <label class="layui-form-label">时间范围</label>
                        <div class="layui-input-inline">
                            <input type="text" name="time" placeholder="选择时间范围" id="time" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">类型范围</label>
                        <div class="layui-input-inline">
                            <select name="type" id="type_view"></select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: auto;line-height: 35px">查询的人</label>
                    <div class="layui-input-block" style="margin-left: 0;line-height: 39px;max-height: 300px;overflow: auto" id="seach">
                        <button type="button" class="layui-btn" id="addPerson">
                            <i class="layui-icon">&#xe608;</i> 添加
                        </button>
                    </div>
                </div>
                <div class="layui-form-item" style="padding-left: 14px">
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit lay-filter="search_result">搜索</button>
                        <button type="reset" lay-submit lay-filter="search_result_reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </div>
        </div>
        <#-- 中部条件查询栏结束 -->
        <hr>
        <#-- 时间线开始 -->
        <div style="max-width: 890px;margin-left: 15px;margin-right: 15px;">
            <ul class="layui-timeline">
                <div id="timeline_view"></div>
            </ul>
            <div id="page"></div>
        </div>
        <#-- 时间线结束 -->
    </div>

</main>
<script>
    let flag = 0
</script>
<script type="text/html" id="type">
    <option value="">全部</option>
    {{# layui.each(d.payload, function(index, item) { }}
    <option value="{{item.id}}">{{ item.name }}</option>
    {{# }) }}
</script>
<script type="text/html" id="timeline">
    {{# layui.each(d.payload.records, function(index, item) { }}
    <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <div class="layui-timeline-title">{{ item.name }}</div>
            <div>
                <span>类型:
                {{# if (item.type != null) { }}
                    {{ item.type.name }}
                {{# } else { }}
                    待确定
                {{# } }}
                </span>
            </div>
            <#if Session["SPRING_SECURITY_CONTEXT"] ??>
            </#if>
            {{# if (flag == 0 || flag == 1) { }}
            <div name="only-text">
                <div>
                    <span>队长：
                        {{ item.userList[0].realName }}
                    </span>
                </div>
                <div>
                    <span>参加人员:
                        {{# item.userList.splice(0, 1) }}
                        {{# if (item.userList.length !== 0) {}}
                        {{# layui.each(item.userList, function(index, user) { }}
                            {{ user.realName }}
                        {{# }) }}
                        {{# } else { }}
                         无
                        {{# } }}
                    </span>
                </div>
                {{# if (item.link != null && item.link != "") { }}
                <div>
                    <span>成果链接: </span>
                    <a href="{{ item.link }}">{{ item.link }}</a>
                </div>
                {{# } else { }}
                <div>
                    <span>成果链接: </span>
                    暂无
                </div>
                {{# } }}
                {{# if (item.getTime != null) { }}
                <div>
                    <span>获得时间: {{ item.getTime }}</span>
                </div>
                {{# } }}
                <div>
                    <span>成果简介: </span>
                    <div class="result_account">
                        {{ item.info }}
                    </div>
                </div>
            </div>
            {{# } else { }}
            <div name="only-text" style="display: none">
                <div>
                    <span>参加人员:
                        {{# layui.each(item.userList, function(index, user) { }}
                            {{ user.realName }}
                        {{# }) }}
                    </span>
                </div>
                {{# if (item.link != null) { }}
                <div>
                    <span>成果链接: </span>
                    <a href="{{ item.link }}">{{ item.link }}</a>
                </div>
                {{# } }}
                {{# if (item.getTime != null) { }}
                <div>
                    <span>获得时间: {{ item.getTime }}</span>
                </div>
                {{# } }}
                <div>
                    <span>成果简介: </span>
                    <div class="result_account">
                        {{ item.info }}
                    </div>
                </div>
            </div>
            {{# } }}

            {{# if (flag == 0 || flag == 2) { }}
            <div name="only-image">
                {{# if (item.resultPictureList.length > 0) { }}
                    <div id="carouselExampleCaptions{{ index }}" class="carousel slide" data-ride="carousel">
                        {{# if (item.resultPictureList.length > 1) { }}
                        <ol class="carousel-indicators">
                            {{# layui.each(item.resultPictureList, function(pic_index, pic) { }}
                            {{# if(pic_index == 0) { }}
                            <li data-target="#carouselExampleCaptions{{ index }}" data-slide-to="{{ pic_index }}" class="active"></li>
                            {{# } else { }}
                            <li data-target="#carouselExampleCaptions{{ index }}" data-slide-to="{{ pic_index }}"></li>
                            {{# } }}
                            {{# }) }}
                        </ol>
                        {{# } }}
                        <div class="carousel-inner">
                            {{# layui.each(item.resultPictureList, function(pic_index, pic) { }}
                            {{# if(pic_index == 0) { }}
                            <div class="carousel-item active">
                                <img src="{{ pic.path }}" class="d-block w-100" alt="{{ pic.path }}">
                                <div class="carousel-caption d-none d-md-block">
                                    <p class="text-truncate">{{ pic.info }}</p>
                                </div>
                            </div>
                            {{# } else { }}
                            <div class="carousel-item">
                                <img src="{{ pic.path }}" class="d-block w-100" alt="{{ pic.path }}">
                                <div class="carousel-caption d-none d-md-block">
                                    <p class="text-truncate">{{ pic.info }}</p>
                                </div>
                            </div>
                            {{# } }}
                            {{# }) }}
                        </div>
                        {{# if (item.resultPictureList.length > 1) { }}
                            <a class="carousel-control-prev" href="#carouselExampleCaptions{{ index }}" role="button" data-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="carousel-control-next" href="#carouselExampleCaptions{{ index }}" role="button" data-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        {{# } }}
                    </div>
                {{# } }}
                </div>
            {{# } else { }}
            <div name="only-image" style="display: none">
                {{# if (item.resultPictureList.length > 0) { }}
                <div id="carouselExampleCaptions{{ index }}" class="carousel slide" data-ride="carousel">
                    {{# if (item.resultPictureList.length > 1) { }}
                    <ol class="carousel-indicators">
                        {{# layui.each(item.resultPictureList, function(pic_index, pic) { }}
                        {{# if(pic_index == 0) { }}
                        <li data-target="#carouselExampleCaptions{{ index }}" data-slide-to="{{ pic_index }}" class="active"></li>
                        {{# } else { }}
                        <li data-target="#carouselExampleCaptions{{ index }}" data-slide-to="{{ pic_index }}"></li>
                        {{# } }}
                        {{# }) }}
                    </ol>
                    {{# } }}
                    <div class="carousel-inner">
                        {{# layui.each(item.resultPictureList, function(pic_index, pic) { }}
                        {{# if(pic_index == 0) { }}
                        <div class="carousel-item active">
                            <img src="{{ pic.path }}" class="d-block w-100" alt="{{ pic.path }}">
                            <div class="carousel-caption d-none d-md-block">
                                <p class="text-truncate">{{ pic.info }}</p>
                            </div>
                        </div>
                        {{# } else { }}
                        <div class="carousel-item">
                            <img src="{{ pic.path }}" class="d-block w-100" alt="{{ pic.path }}">
                            <div class="carousel-caption d-none d-md-block">
                                <p class="text-truncate">{{ pic.info }}</p>
                            </div>
                        </div>
                        {{# } }}
                        {{# }) }}
                    </div>
                    {{# if (item.resultPictureList.length > 1) { }}
                    <a class="carousel-control-prev" href="#carouselExampleCaptions{{ index }}" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleCaptions{{ index }}" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                    {{# } }}
                </div>
                {{# } }}
            </div>
            {{# } }}
        </div>
    </li>
    {{# }) }}
    {{# if (d.payload.total == 0) { }}
    <li class="layui-timeline-item">
        <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <div class="layui-timeline-title">这里的精彩尚未到来</div>
        </div>
    </li>
    {{# } }}
</script>
<script type="text/html" id="addUserForm">
    <form class="layui-form" action="" style="background-color: white;padding-top: 10px">
<#--        <div class="layui-form-item">-->
<#--            <label class="layui-form-label">用户名</label>-->
<#--            <div class="layui-input-block">-->
<#--                <input type="text" name="username" class="layui-input" style="max-width: 300px" value="章宇鑫"/>-->
<#--            </div>-->
<#--        </div>-->
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto">请选择</label>
            <div class="layui-input-block">
                {{# layui.each(d.payload, function(index, item) { }}
                <i class="layui-inline layui-inline-block" onmouseover="this.style.cursor='pointer'" style="position: relative">
                    <input type="hidden" name="userId" value="{{ item.id }}" />
                    <div class="img-box" data-text="{{ item.realName }}">
                        {{# if (item.avatarPath != null) { }}
                        <img class="layui-circle layui-anim" src="{{ item.avatarPath }}"
                             alt="logo" width="50" onclick="chooseThis(this)">
                        {{# } else { }}
                        <img class="layui-circle layui-anim" src="/images/logo.png"
                             alt="logo" width="50" onclick="chooseThis(this)">
                        {{# } }}
                    </div>
                </i>
                {{# }) }}
            </div>
        </div>
    </form>
</script>
<script>
    $(function () {
        $('#customRadioInline1').click(function () {
            flag = 0;
            $('div[name="only-image"]').show()
            $('div[name="only-text"]').show()
        });
        $('#customRadioInline2').click(function () {
            flag = 1;
            $('div[name="only-text"]').show()
            $('div[name="only-image"]').hide()
        });
        $('#customRadioInline3').click(function () {
            flag = 2;
            $('div[name="only-image"]').show()
            $('div[name="only-text"]').hide()
        });


        layui.use(['laydate', 'layer', 'laytpl', 'form', 'laypage'], function () {
            const laydate = layui.laydate
                , layer = layui.layer
                , laytpl = layui.laytpl
                , form = layui.form
                , laypage = layui.laypage;

            layer.load()

            $.get('/type/get', function(data) {
                const getTpl = type.innerHTML
                    , view = document.getElementById('type_view');
                laytpl(getTpl).render(data, function(html){
                    view.innerHTML = html;
                });
                form.render('select');
            })

            function searchResult(data, page, size) {
                let formData = new FormData()
                formData.append('time', data.field['time'])
                formData.append('type', data.field['type'])
                let userIds = [];
                $('input[name="userId"]').each(function() {
                    userIds.push($(this).val())
                })
                formData.append("userIds[]", userIds);
                if (page !== undefined) {
                    formData.append("page", page);
                }
                if (size != undefined) {
                    formData.append("size", size);
                }

                $.ajax({
                    url: '/result/search',
                    type: 'post',
                    processData: false,
                    contentType: false,
                    data: formData,
                    success: function (result) {
                        layer.close(layer.index)
                        renderData(result)
                        laypage.render({
                            elem: 'page'
                            , count: result.payload.total
                            , curr: result.payload.current
                            , limit: 10
                            ,jump: function(obj, first){
                                //首次不执行
                                if(!first) {
                                    searchResult(data, obj.curr, obj.limit)
                                }
                            }
                        });
                    },
                    error: function (data) {
                        layer.close(layer.index)
                        console.log("error")
                    }
                })
            }

            form.on('submit(search_result)', function(data){
                layer.load()
                searchResult(data)
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

            form.on('submit(search_result_reset)', function(data){
                layer.load()
                form.val("search_result_form", {
                    "time": "",
                    "type": ""
                });
                data.field['time'] = ""
                data.field['type'] = ""
                $('#seach').children('i').remove()
                searchResult(data)
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

            function renderData(data) {
                const getTpl = timeline.innerHTML
                    , view = document.getElementById('timeline_view');
                laytpl(getTpl).render(data, function(html){
                    view.innerHTML = html;
                });
            }

            $.get('/result/getAll', function (data) {
                layer.close(layer.index)
                renderData(data)
                laypage.render({
                    elem: 'page'
                    , count: data.payload.total
                    , curr: data.payload.current
                    , limit: 10
                    ,jump: function(obj, first){
                        //首次不执行
                        if(!first){
                            $.get('/result/getAll?page=' + obj.curr + '&size=' + obj.limit, function (data) {
                                renderData(data)
                            })
                        }
                    }
                });
            })

            laydate.render({
                elem: '#start_time',
                type: 'date',
                max: 0
            });

            laydate.render({
                elem: '#end_time',
                type: 'date',
                max: 0,
                done: function (value, date) {
                    if ($('#start_time').val() > value) {
                        layer.msg('时间选择错误', {time: 1000})
                        $('#end_time').focus()
                    }
                }
            });

            $('#add_time').click(function () {
                let startTime = $('#start_time').val();
                let endTime = $('#end_time').val();
                if (startTime === '' || endTime === '') {
                    layer.msg('不能为空!', {icon: 5})
                    return;
                }
                if (startTime > endTime) {
                    layer.msg('时间错误!', {icon: 5});
                    return;
                }
                layer.msg('开始时间:' + startTime + ', 结束时间: ' + endTime);
            })

        })
    })
</script>
<script>
    function chooseThis(that) {
        if (that.style.borderColor === "") {
            that.style.borderColor = "red";
            that.style.borderStyle = "outset";
            that.style.borderWidth = "2px";
            that.classList.add("layui-anim-scale");
            that.classList.remove("layui-anim-scaleSpring");
        } else {
            that.style.borderColor = "";
            that.style.borderStyle = "";
            that.style.borderWidth = "";
            that.classList.add("layui-anim-scaleSpring");
            that.classList.remove("layui-anim-scale");
        }
    }

    $('.result_account').un_displayPart();
    $('.result_account').click(function () {
        $(this).attr("displayLength", "300")
        $(this).un_displayPart();
    })


    layui.use(['laydate', 'form', 'layer', 'laytpl'], function () {
        const laydate = layui.laydate
            , form = layui.form
            , layer = layui.layer
            , laytpl = layui.laytpl
            , $ = layui.$;


        $('#addPerson').click(function () {
            let idInputs = $('.layui-anim-scale').parent().prev().toArray();
            const ids = idInputs.map(t => t.value)
            $.get('/user/others?userIds=' + ids.join(), function(data) {
                const getTpl = addUserForm.innerHTML;
                laytpl(getTpl).render(data, function(html){
                    layer.open({
                        type: 1,
                        title: '添加人员',
                        area: '90%',
                        content: html,
                        btn: ['确定', '取消'],
                        yes: function(index, layero){
                            let imgBox = $('.layui-anim-scale').parent();
                            let idInputs = imgBox.prev().toArray();
                            imgBox.addClass("img-box-before")
                            $('#seach').prepend(imgBox.parent())
                            form.render();
                            layer.close(index)
                        },
                        btn2: function(index, layero) {

                        }
                    })
                });
            })


        });

        /* 点击已经选择的人员取消选择 */
        $(document).on('click', '.img-box-before', function() {
            $(this).parent().remove()
            form.render();
        });

        form.render();
        laydate.render({
            elem: '#time'
            , range: true //或 range: '~' 来自定义分割字符
            , max: 0
        })
    })
</script>
<#include '../footer.ftl'>